import React from "react";
import QueueAnim from "rc-queue-anim";
import TweenOne from "rc-tween-one";
import { Row, Col } from "antd";
import OverPack from "rc-scroll-anim/lib/ScrollOverPack";
import { getChildrenToRender } from "../../utils";
import "./contentBottom.less";
const ContentBottom = (props: any) => {
  const { dataSource } = props;

  let clearFloatNum = 0;
  const getDelay = (e, b) => (e % b) * 100 + Math.floor(e / b) * 100 + b * 100;
  const children = dataSource.block.children.map((item, i) => {
    const childObj = item.children;
    const delay = getDelay(i, 24 / item.md);
    const liAnim = {
      opacity: 0,
      type: "from",
      ease: "easeOutQuad",
      delay,
    };
    const childrenAnim = { ...liAnim, x: "+=10", delay: delay };
    clearFloatNum += item.md;
    clearFloatNum = clearFloatNum > 24 ? 0 : clearFloatNum;
    return (
      <TweenOne
        component={Col}
        animation={liAnim}
        key={item.name}
        {...item}
        componentProps={{ md: item.md, xs: item.xs }}
        className={
          !clearFloatNum
            ? `${item.className || ""} clear-both`.trim()
            : item.className
        }
      >
        <TweenOne
          animation={{
            x: "-=10",
            opacity: 0,
            type: "from",
            ease: "easeOutQuad",
          }}
          key="img"
          {...childObj.icon}
        >
          <span className={"iconfont " + childObj.icon.children}></span>
        </TweenOne>
        <div {...childObj.textWrapper}>
          <TweenOne
            key="h2"
            animation={childrenAnim}
            component="h2"
            {...childObj.title}
          >
            {childObj.title.children}
          </TweenOne>
          <TweenOne
            key="p"
            animation={{ ...childrenAnim, delay: delay }}
            component="div"
            {...childObj.content}
          >
            {childObj.content.children}
          </TweenOne>
        </div>
      </TweenOne>
    );
  });
  return (
    <div {...props} {...dataSource.wrapper}>
      <div {...dataSource.page}>
        <div {...dataSource.titleWrapper}>
          {dataSource.titleWrapper.children.map(getChildrenToRender)}
        </div>
        <OverPack {...dataSource.OverPack}>
          <QueueAnim key="u" type="bottom">
            <Row key="row" {...dataSource.block}>
              {children}
            </Row>
          </QueueAnim>
        </OverPack>
      </div>
    </div>
  );
};
export default ContentBottom;
